<template>
	<view>
		<!-- 商品信息 S -->
		<view class="top-box level_align tp-ptb0lr30 tp-mb2 tp-bgf">
			<image class="tp-br8 tp-mr20" :class="pageName == 'hotel' ? 'hotel-img' : pageName == 'travel' ? 'travel-img': pageName == 'scenic' ? 'scenic-img' : '' "
			 :src="wwwImgUrl + shopCover" mode="aspectFill"></image>
			<view class="flex-1 ellispsis1  tp-fc333 tp-fz26">
				{{shopName}}
			</view>
		</view>
		<!-- 商品信息 E -->
		<view class="level_align tp-h88 tp-ptb0lr30 tp-bgf tp-fz28 tp-mb2">
			<text class="tp-mr20">评价</text>
			<view class="tp-mr20">
				<uni-rate v-if="pageType" @change="handgChangRate" class="uni_rate" size="26" margin="6" value="5"></uni-rate>
				<uni-rate v-if="!pageType" class="uni_rate" size="26" margin="6" :disabled="true" :value="score"></uni-rate>
			</view>
			<text v-if="pageType" class="tp-yellow ">{{form.score}}分</text>
			<text v-if="!pageType" class="tp-yellow ">{{score}}分</text>
		</view>
		<!-- 评价标签 S -->
		<view class="level_align flex_wrap tp-ptb0lr30 tp-mb20 tp-bgf tp-pb30 tp-mb2" v-if="pageType">
			<view class="label-tag tp-dib tp-wsn tp-ptb0lr20 tp-br40 tp-lh54 tp-mt20 tp-mr20 tp-fc666 tp-bcF5  tp-fz26" :style="{background: item.choosed ? '#FEEDEC' : '#f5f5f5'}"
			 v-for="(item,index) in evaluateLabelList" :key="index" @click="selectLable(item)">
				{{item.value}}
			</view>
		</view>
		<view class="level_align flex_wrap tp-ptb0lr30 tp-mb20 tp-bgf tp-pb30 tp-mb2" v-if="!pageType && evaluateLabelList.length">
			<view class="label-tag tp-dib tp-wsn tp-ptb0lr20 tp-br40 tp-lh54 tp-mt20 tp-mr20 tp-fc666 tp-bcF5  tp-fz26" style="background: #FEEDEC"
			 v-for="(item,index) in evaluateLabelList" :key="index">
				{{item}}
			</view>
		</view>
		<!-- 评价标签 E -->

		<view class="tp-pd30 tp-bgf tp-pb30 tp-mb2">
			<view class=" ">
				<textarea v-if="pageType" class="tp-w100" value="" :maxlength="-1" v-model="form.content" :placeholder="'请留下您对'+ (pageName == 'hotel' ? '酒店' : pageName == 'scenic' ? '景区' : pageName == 'travel' ? '旅游' : '') + '的评价吧~'" />
				<view v-if="!pageType" class="tp-lh44 tp-fc333 tp-fz26">
					{{content}}
				</view>
				<view class="tp-mt20 tp-w690 level_align flex_wrap">
					<view class="up-img tp-mb20 tp-pr" v-for="(item, index) in list" :index="index" :key="index" :style="{marginRight:(index+1)%4 == 0 ?'0':'30rpx'}">
						<image class="tp-br8" :src="item" mode="aspectFill" @click="previewImg(item)"></image>
						<image v-if="pageType" @click="delThisImg(index)" class="close-icon" src="../static/imgs/icons/close4.png" mode=""></image>
					</view>
					<view v-if="list && list.length < 4 && pageType" @click="handleUploadIDImgPositive" class="up-img tp-mb20">
						<image class="up-img" src="static/upimg1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="tp-h98" v-if="pageType"></view>
		<view class="tp-pd30" v-if="pageType">
			<view @click="handeSubmitEvaluate" class="btn tp-bc tp-fcF tp-fz30 tp-h88  center_combo">
				提交
			</view>
		</view>
		<view class="tp-h98"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: 'hotel', // hotel 酒店  scenic 景区  travel 旅游
				pageType: true, // 0 评价	1查看评价
				id: '', 
				orderNo: '', //订单编号
				shopName: '', // 标题
				shopCover: '', // 商品图片
				evaluateLabelList: [], // 标签
				score:  3, // 详情的评分
				content:  '', // 详情的评分
				list: [], // 页面显示上传的图片
				uplist: [], // 要上传的图片
				form: {
					score: 5, // 星星
					content: '' , //	内容
					evaluationImg: '', // // 图片字段拼接字符串
				}
			};
		},
		onLoad(opt) {
			this.pageName = opt.pageName
			this.id = opt.id
			this.orderNo = opt.orderNo
			this.shopName = opt.shopName
			this.shopCover = opt.shopCover
			if(opt.pageType && opt.pageType == 1){  // 查看评价
				this.pageType = false
				this.getDetail() 
			}else{
				this.pageType = true
				this.getDictData()
				if(this.pageName == 'make'){
					this.getPageInfo()
				}
			}
		},
		methods: {
			// 获取定制行程安排详情
			getPageInfo() {
				this.$http.get(this.$api.customizedInfoDesc + '?orderId=' + this.id).then(res => {
					if (res.code === 200) {
							this.shopName = res.data.travelName
							this.shopCover = res.data.travelCover
					}
				})
			},
			// 获取评价详情
			getDetail() {
				let url = ''
				if(this.pageName == 'hotel'){
					url = this.$api.hotelEvaluateOrderDetail + '?orderId=' + this.id
				} else if(this.pageName == 'scenic'){
					url = this.$api.scenicEvaluateOrderDetail + '?orderId=' + this.id
				} else if(this.pageName == 'travel'){
					url = this.$api.travelGroupEvaluateOrderDetail + '?orderId=' + this.id
				} else if(this.pageName == 'make'){
					url = this.$api.makeEvaluateOrderDetail + '?orderId=' + this.id
				}
				this.$http.get(url).then(res => {
					if (res.code === 200) {
						this.id =  res.data.orderId
						this.orderNo =  res.data.orderNo
						this.shopName =  res.data.shopName
						this.shopCover =  res.data.shopCover
						this.score =  res.data.score
						this.content =  res.data.content
						if(res.data.evaluationImg){
							let arr = res.data.evaluationImg.split(',')
							arr.map(item => {
								let  str = this.$imgUrl + item
								this.list.push(str)
							})
						}
						
						this.evaluateLabelList = res.data.evaluationLabel
					}
				})
			},
			// 提交评价
			handeSubmitEvaluate(){
				let {score,content,evaluationImg} = this.form
				let evaluationLabel = '', arr = [];
				this.evaluateLabelList.forEach(item => {
					if(item.choosed){
						arr.push(item.id)
					}
				})
				evaluationLabel = arr.join(',')
				
				if(!content)return uni.showToast({
					title: '请填写评价内容',
					icon: 'none'
				})
				let url = ''
				if(this.pageName == 'hotel'){
					url = this.$api.hotelEvaluateOrder + '?hotelId=' + this.id
				} else if(this.pageName == 'scenic'){
					url = this.$api.scenicEvaluateOrder
				} else if(this.pageName == 'travel'){
					url = this.$api.travelGroupEvaluateOrder
				} else if(this.pageName == 'make'){
					url = this.$api.makeEvaluateOrder
				}
				this.$http.post(url, {
					orderId:this.id,orderNo:this.orderNo,score,content,evaluationImg,evaluationLabel
					})
					.then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '评价成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.redirectTo({
								    url: './hotelEvaluate?pageName='+this.pageName+'&pageType=1&id=' + this.id
								});
							},600)
						}
					})
			},
			// 各种下拉选项设置 105.房间评价标签  203:景区评价标签  502: 跟团游订单评价标签  506: 定制游评价标签
			getDictData() {
				let type = ''
				if(this.pageName == 'hotel'){
					type = '105'
				} else if(this.pageName == 'scenic'){
					type = '203'
				} else if(this.pageName == 'travel'){
					type = '502'
				} else if(this.pageName == 'make'){
					type = '506'
				}
				this.$http.get(this.$api.dictData + '?type=' + type).then(res => {
					if (res.code === 200) {
						 res.data.map(item => {
							item.choosed = false
						})
						this.evaluateLabelList = res.data
					}
				})
			},
			// 选择标签
			selectLable(item) {
				return item.choosed = !item.choosed
			},
			// 选择评分
			handgChangRate(rate) {
				this.form.score	 = rate.value
			},
			// 上传图片
			handleUploadIDImgPositive() {
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({
						tempFilePaths
					}) => {
						uni.uploadFile({
							url: _this.$baseUrl + _this.$api.uploadFile,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let uploadData = JSON.parse(uploadFileRes.data)
								console.log(uploadData);
								_this.list.push(this.$imgUrl + uploadData.url)
								_this.uplist.push(uploadData.url)
								_this.form.evaluationImg = _this.uplist.join(',')
								// _this.$set(this.updata, key, uploadData.url)
							}
						})
					}
				});
			},
			// 删除这个图片
			delThisImg(index) {
				console.log(index);
				this.list.splice(index, 1)
				this.uplist.splice(index, 1)
				this.form.evaluationImg = this.uplist.join(',')
			},
			// 预览图片
			previewImg(url) {
				console.log(url);
				uni.previewImage({
					current: url,
					urls: this.list,
					success: function() {
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.top-box {
		height: 100rpx;

		.hotel-img {
			width: 76rpx;
			height: 64rpx;
		}
		.travel-img {
			width: 108rpx;
			height: 64rpx;
		}
		.scenic-img{
			width: 86rpx;
			height: 64rpx;
		}
	}

	.close-icon {
		position: absolute;
		top: -14rpx;
		right: -8rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 10;
	}

	.up-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 4rpx;
	}

	.btn {
		border-radius: 44rpx;
		background: linear-gradient(90deg, #00B4FF, #10DAFF);
	}
</style>
